import React, { useRef, useState } from 'react';
import style from './Recommendedimages.module.css';
import Imglist from './Imglist/Imglist';
import Video from './Video/Video';
import Music from './Music/Music';
import { SearchOutlined, } from '@ant-design/icons';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { getUp } from '../../request';
import { Button } from 'antd';

function Batchdesignimages() {
    const [keys, setKeys] = useState('1');
    const onChange = (key: string) => {
        setKeys(key);
        console.log(keys);
    };
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '图片'
        },
        {
            key: '2',
            label: '视频'
        },
        {
            key: '3',
            label: '音频'
        },
    ];
    const [hovered, setHovered] = useState(false);

    // 上传
    const input_box = useRef();

    // const upData = async () => {
    //     let files = input_box.current.files;
    //     if (!files.length) {
    //         alert('没有上传');
    //     } else {
    //         let formData = new FormData();
    //         for (let i = 0; i < files.length; i++) {
    //             formData.append('files' + i, files[i]);
    //         }
    //         let res = await getUp(formData);
    //         let urls = res.data.arr;
    //         // 获取已有的 URL
    //         let existingUrlsString = localStorage.getItem('url');
    //         let existingUrls = existingUrlsString? existingUrlsString.split(',') : [];
    //         // 合并新的 URL 和已有的 URL
    //         let combinedUrls = [...existingUrls,...urls];
    //         localStorage.setItem('url', combinedUrls.join(','));
    //         window.location.href = window.location.href;
    //     }
    // };
// const upData = async () => {
//     let files = input_box.current.files;
//     if (!files.length) {
//         alert('没有上传');
//     } else {
//         let validFormats = ['image/png', 'image/jpeg', 'image/svg+xml'];
//         let validFiles = [];
//         for (let file of files) {
//             if (file.size <= 5 * 1024 * 1024 && validFormats.includes(file.type)) {
//                 validFiles.push(file);
//             } else {
//                 alert(`文件 ${file.name} 不符合上传要求，仅支持 20MB 以内的 png、jpeg、svg 格式图片。`);
//             }
//         }
//         if (validFiles.length === 0) {
//             return;
//         }
//         let formData = new FormData();
//         for (let i = 0; i < validFiles.length; i++) {
//             formData.append('files' + i, validFiles[i]);
//         }
//         let res = await getUp(formData);
//         let urls = res.data.arr;
//         // 获取已有的 URL
//         let existingUrlsString = localStorage.getItem('url');
//         let existingUrls = existingUrlsString? existingUrlsString.split(',') : [];
//         // 合并新的 URL 和已有的 URL
//         let combinedUrls = [...existingUrls,...urls];
//         localStorage.setItem('url', combinedUrls.join(','));
//         window.location.href = window.location.href;
//     }
// };

const upData = async () => {
    let files = input_box.current.files;
    if (!files.length) {
        alert('没有上传');
    } else {
        let imageFormats = ['image/png', 'image/jpeg', 'image/svg+xml'];
        let videoFormat = 'video/mp4';
        let audioFormat = 'audio/mpeg';
        let gifFormat = 'image/gif';
        let validFiles = [];
        for (let file of files) {
            if ((file.type === videoFormat && file.size <= 100 * 1024 * 1024 && isWithinThreeMinutes(file)) ||
                (file.type === audioFormat && file.size <= 20 * 1024 * 1024 && isWithinFiveMinutes(file)) ||
                (file.type === gifFormat && file.size <= 5 * 1024 * 1024) ||
                (file.type && imageFormats.includes(file.type) && file.size <= 20 * 1024 * 1024)) {
                validFiles.push(file);
            } else {
                if (file.type === videoFormat) {
                    alert(`视频文件 ${file.name} 不符合上传要求，仅支持 100MB、3 分钟以内的 mp4 格式视频。`);
                } else if (file.type === audioFormat) {
                    alert(`音频文件 ${file.name} 不符合上传要求，仅支持 20MB、5 分钟以内的 mp3 格式音频。`);
                } else if (file.type === gifFormat) {
                    alert(`动图文件 ${file.name} 不符合上传要求，仅支持 5MB 以内的 gif 格式动图。`);
                } else {
                    alert(`文件 ${file.name} 不符合上传要求，仅支持 20MB 以内的 png、jpeg、svg 格式图片。`);
                }
            }
        }
        if (validFiles.length === 0) {
            return;
        }
        let formData = new FormData();
        for (let i = 0; i < validFiles.length; i++) {
            formData.append('files' + i, validFiles[i]);
        }
        let res = await getUp(formData);
        let urls = res.data.arr;
        // 获取已有的 URL
        let existingUrlsString = localStorage.getItem('url');
        let existingUrls = existingUrlsString? existingUrlsString.split(',') : [];
        // 合并新的 URL 和已有的 URL
        let combinedUrls = [...existingUrls,...urls];
        localStorage.setItem('url', combinedUrls.join(','));
        window.location.href = window.location.href;
    }
};
function isWithinThreeMinutes(file) {
    // 获取视频时长需要使用特定的视频解析库，这里只是一个示例函数，假设可以获取时长（单位：秒）
    // 实际应用中可能需要使用专门的视频解析库来获取视频时长
    const assumedDuration = 180; 
    return assumedDuration > 0;
}

function isWithinFiveMinutes(file) {
    // 获取音频时长同样需要特定音频解析库，这里只是示例假设
    const assumedDuration = 300; 
    return assumedDuration > 0;
}
    
    const upMaterial = () => {
        input_box.current.click();
    };

    return (
        <div className={style.Batchdesignimages}>
            <div>
                <div className={style.title}>我的上传</div>
                <div className={style.button}>
                    <Button type="primary" className={style.show}
                        onMouseEnter={() => setHovered(true)}
                        onMouseLeave={() => setHovered(false)}
                        onClick={upMaterial}
                    >上传素材</Button><Button type="primary">△</Button>
                    <input type="file" multiple accept='image/*,video/*,audio/*'
                        onChange={upData} ref={input_box} style={{ display: 'none' }} />
                </div>

                <div className={`${style.none} ${hovered? style.show : ''}`}>
                    <p>上传格式支持:</p>
                    <p>图片: 20MB 以内,png、jpeg、svg 格式</p>
                    <p>动图: 5MB 以内,gif 格式</p>
                    <p>视频: 100MB、3 分钟以内,mp4 格式</p>
                    <p>音频: 20MB、5 分钟以内,mp3 格式</p>
                </div>
            </div>
            <div className={style.search}>
                <p><b><SearchOutlined /></b><span>搜索图片</span></p>
            </div>
            <div className={style.Recommendedimages}>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                <div>
                    <div>
                        {keys === '1'? <div className="main">
                            <Imglist/>
                    
                        </div> : ''}
                    </div>
                    <div>
                        {keys === '2'? <div className={style.main1}>
                            <Video />
                        </div> : ''}
                    </div>
                    <div>
                      {keys === '3'? <div className={style.main1}>
                            <Music />
                        </div> : ''}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Batchdesignimages;